<template>
  <div>
    <img-clipper id="test" ref="clipper" imgSrc="http://orgsd4jq1.bkt.clouddn.com/FnguwxsFYECMxYH0gspr6Sp5qM3C" :ratio="19/5"></img-clipper>
    <el-button @click="handleClip">保存</el-button>
    <div><img :src="dataUrl" alt=""></div>
  </div>
</template>
<script>
import imgClipper from '@/components/common/clipper'
export default{
  components: {imgClipper},
  data () {
    return {
      dataUrl: null
    }
  },
  methods: {
    handleClip () {
      let file = this.$refs.clipper.clip()
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.dataUrl = reader.result
      }
    }
  }
}
</script>
<style lang="scss">
  #test{margin-top:50px;margin-left:50px;}
</style>
